<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <!-- template 不能作为最外层的根元素  只能当作子元素使用因为这个元素会有多个节点 -->
    <div class="app">
        <template>
            <div v-if='ok'>
                <h1>Title</h1>
                <p>Paragraph-1</p>
                <p>Paragraph-2</p>
            </div>
            <h1 v-else>Oh no 😢 😒😒🤳</h1>
            
        </template>
        <button @click='ok = !ok'>切换</button>
    </div>


    <script>
        // new Vue({
        //     data:function(){
        //         return{
        //             ok:!!1
        //         }
        //     }
        // }).$mount('.app')
        new Vue({
            data: {
                ok: false
            }
        }).$mount('.app')
    </script>

</body>

</html>